<template>
  <vs-dialog :loading="loading" class="confirm" width="550px" not-center :value.sync="active" @close="handleCancel">
    <template #header>
      <h4 class=" confirm-title">
        {{ options.title }}
      </h4>
    </template>


    <div class="con-content">
      <div v-if="options.content" v-html="options.content"></div>
      <vs-input v-if="options.type===3" v-model="value" placeholder="Name"></vs-input>
    </div>

    <template #footer>
      <div class="con-footer flex-row justify-end">
        <vs-button @click="handleConfirm" transparent>
          {{ confirmBtn }}
        </vs-button>
        <vs-button @click="handleCancel" dark transparent v-if="options.type===1||options.type===2">
          {{ cancelBtn }}
        </vs-button>
      </div>
    </template>
  </vs-dialog>
</template>

<script>
export default {
  name: "Confirm",
  data: () => ({
    value: "",
    loading: false,
  }),
  props: {
    options: {
      type: Object,
      default: () => ({})
    },
    active: {
      type: Boolean,
      default: false
    },
    confirmBtn: {
      type: String,
      default: "确定"
    },
    cancelBtn: {
      type: String,
      default: "取消"
    },
  },
  methods:{
    handleConfirm() {
      this.$emit("update:active", false)
      this.$emit("confirm", this.value)
    },
    handleCancel() {
      this.$emit("update:active", false)
      this.value = ""
      this.$emit("close")
    },
  }
}
</script>

<style scoped lang="scss">
.confirm ::v-deep .vs-dialog {
  user-select: none;
  top: -100px;

  .vs-input-parent {
    width: 100%

  }

  .vs-input-content {
    margin: 10px 0;
    width: calc(100%)
  }

  .vs-input {
    width: 100%
  }

  b{
    font-weight: 600;
    color: rebeccapurple;
  }
}

.confirm-title {
  margin: 0;
  font-weight: normal;
  padding: 10px;
  padding-bottom: 0;
  font-size: 18px;
}

.con-content {
  line-height: 1.5;
  font-size: 14px;
  text-indent: 2em;
}


</style>
